<template>
  <div>
    <el-row :gutter="20" class="t">
      <el-col :span="6">进件链接</el-col>
      <el-col :span="18">
        <span class="sj" @click="copy(baseUrl)">{{ baseUrl }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="t">
      <el-col :span="6">进件二维码</el-col>
      <el-col :span="18">
        <div @click="download($refs.qrCodeDiv)" ref="qrCodeDiv">
          <div style="width: 150px;height: 150px;">
            <div id="qrcode"></div>
          </div>
          <div style="width: 100px;text-align:center;font-size: 12px" class="invite">备注：{{
              remark ? remark : '暂无'
            }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="t">
      <el-col :span="6">进件查询链接</el-col>
      <el-col :span="18">
        <span class="sj" @click="copy(baseUrl + '&to=refer')">{{ baseUrl + '&to=refer' }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="t">
      <el-col :span="6">进件查询二维码</el-col>
      <el-col :span="12">
        <div @click="download($refs.qrCodeDiv1)" ref="qrCodeDiv1">
          <div style="width: 150px;height: 150px;">
            <div id="qrcode2"></div>
          </div>
          <div style="width: 100px;text-align:center;font-size: 12px" class="invite">备注：{{
              remark ? remark : '暂无'
            }}
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="t">
      <el-col :span="6">编辑链接/二维码</el-col>
      <el-col :span="18">
        <div class="edit">
          进件备注：
          <input v-model="remark" placeholder="请输入备注" style="width: 150px">
          <button @click="update()">写入</button>
        </div>
        <div class="edit">
          填写人可修改备注:
          <el-switch
            v-model="isEdit"
            @change="update()"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import QRCode from 'qrcode'
  import html2canvas from 'html2canvas'

  import {qrSet} from "@/utils/options"

  export default {
    name: "invite-item",
    data() {
      return {
        remark: undefined,
        isEdit: false,
        baseUrl: null,
        qrcode: null,
        qrcode2: null
      }
    },
    created() {
      this.update()
    },
    methods: {
      copy(text) {
        this.$clipboard(text)
        this.$modal.msgSuccess('已复制')
      },
      update() {
        this.baseUrl = window.location.origin + '/invite?id=' + this.$store.state.user.id
        this.baseUrl += (this.isEdit ? '&edit=1' : '')
        this.baseUrl += (this.remark ? '&remark=' + this.remark : '')
        this.$nextTick(() => {
          if (this.qrcode) {      // 如果二维码对象已存在，则更新链接
            this.qrcode.clear();  // 清除之前的二维码
            this.qrcode.makeCode(this.baseUrl) // 生成新的二维码
          } else {
            // 如果二维码对象不存在，则创建新的二维码对象
            this.qrcode = new QRCode('qrcode', {
              text: this.baseUrl, // 需要转换为二维码的内容
              ...qrSet
            })
          }
          let url = this.baseUrl + '&to=refer'
          if (this.qrcode2) {
            this.qrcode2.clear();       // 清除之前的二维码
            this.qrcode2.makeCode(url)  // 生成新的二维码
          } else {
            this.qrcode2 = new QRCode('qrcode2', {
              text: url, // 需要转换为二维码的内容
              ...qrSet
            })
          }
        })
      },

      download(e) {
        html2canvas(e, {
          allowTaint: true,
          useCORS: true, // 设置跨域
          tainttest: true, // 检测每张图片都已经加载完成
          backgroundColor: null, //背景色, 转换图片可能会有白色底色，不要的话就null
        }).then((canvas) => {
          const link = document.createElement("a"); // 创建一个超链接对象实例
          link.download = this.$store.getters.name + (this.remark ?
            '(' + this.remark + ')' : '') + '.png'; // 设置要下载的图片的名称
          link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
          link.click(); // 触发超链接的点击事件
        })
      }
    }
  };
</script>

<style lang="scss">
  .t {
    font-size: 13px;
  }

  .sj {
    color: rgb(64, 158, 255);
  }

  .edit {
    font-size: 13px;
    padding: 4px 0
  }
</style>


